<template>
	<view class="user u-skeleton" :class="themeName">
		<view class="user-info flex-col" :style="[bgStyle]">
			<u-gap height="40"></u-gap>
			<view class="user-top flex flex-1">
				<view class="logo flex row-center col--center">
					<image class="avatar" :src="userInfo.avatar" mode="widthFix" />
				</view>
				<view class="m-l-30 flex-1">
					<view class="xxl white bold">{{userInfo.nickname}}</view>
					<view class="user-id m-t-10">
						<view class="xs m-r-20 white">{{$zhTran('服务人员ID')}}：{{userInfo.sn}}</view>
					</view>
				</view>
			</view>
			<u-gap height="40"></u-gap>

			<view class="p-l-20 p-r-20">
				<view class="top-tab item-tab">
					<view class="data-tab flex row-between">
						<view>
							<view class="number">{{accendant_Info.work_new_today||0}}</view>
							<view class="desc">{{$zhTran('今天新增工单')}}</view>
						</view>
						<view>
							<view class="number">{{accendant_Info.done_count_today||0}}</view>
							<view class="desc">{{$zhTran('今天完成工单')}}</view>
						</view>
					</view>
				</view>

				<view class="top-tab item-tab">
					<view class="title flex row-left">
						<view>
							<u-line direction="col" length="30rpx" color="rgba(64, 115, 250, 1)" :hair-line="false"
								border-width="6rpx" margin="0rpx 10rpx"></u-line>
						</view>
						<text>{{$zhTran('工单数据')}}</text>
					</view>
					<view class="data-tab flex row-between">
						<view>
							<view class="number">{{accendant_Info.wait_count||0}}</view>
							<view class="desc">{{$zhTran('待分派工单')}}</view>
						</view>
						<view>
							<view class="number">{{accendant_Info.work_count||0}}</view>
							<view class="desc">{{$zhTran('进展工单')}}</view>
						</view>
						<view>
							<view class="number">{{accendant_Info.done_count||0}}</view>
							<view class="desc">{{$zhTran('完成工单')}}</view>
						</view>
					</view>
					<view class="data-tab flex row-between m-t-40">
						<view>
							<view class="number">{{accendant_Info.wait_profit||0}}</view>
							<view class="desc">{{$zhTran('待结算工单')}}</view>
						</view>
						<view>
							<view class="number">{{accendant_Info.work_profit||0}}</view>
							<view class="desc">{{$zhTran('进展收益')}}</view>
						</view>
						<view>
							<view class="number">{{accendant_Info.done_profit||0}}</view>
							<view class="desc">{{$zhTran('完成收益')}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order-info p-20">
			<view class="flex row-between m-b-20">
				<view class="title flex row-left">
					<view>
						<u-line direction="col" length="30rpx" color="rgba(64, 115, 250, 1)" :hair-line="false"
							border-width="6rpx" margin="0rpx 10rpx"></u-line>
					</view>
					<text>{{$zhTran('工单列表')}}</text>
				</view>
				<view class="more flex" @click="toPath('list')">{{$zhTran('查看更多')}}<u-icon name="arrow-right"
						color="rgba(159, 159, 159, 1)" class="m-l-10"></u-icon></view>
			</view>
			<view class="order-box flex col-top" v-for="item,idx in orderList" :key="idx"
				@click="toPath('detail',{id:item.id})">
				<view class="box-main m-l-10">
					<view class="flex row-between u-border-bottom p-b-20">
						<view>{{item.type_desc}}</view>
						<view class="badge m-l-20" :class="[statusDesc[item.status]]">{{item.status_desc}}</view>
					</view>
					<view class="flex m-t-20 m-b-20">
						<view>{{item.user_nickname}}</view>
						<view class="m-l-10 m-r-10">{{item.user_mobile}}</view>
						<view style="color: rgba(64, 115, 250, 1);"
							@click.native.stop="callPhone($event,item.user_mobile)">
							{{$zhTran('拨打')}}
						</view>
					</view>
					<view class="flex m-t-20 m-b-20 desc">{{item.order_goods[0].goods_name}}</view>
					<view class="flex m-t-20 m-b-20 desc u-border-bottom p-b-20">
						{{item.order_goods[0].delivery_address}}
					</view>
					<view class="flex m-t-20 m-b-20 desc">{{$zhTran('工单用时：')}}{{item.use_hours}}</view>
				</view>
			</view>

		</view>

		<u-tabbar v-model="current" :list="navList" active-color="rgba(64, 115, 250, 1)"
			inactive-color="rgba(133, 133, 133, 1) " @change="toTabbar"></u-tabbar>

		<loading-view v-show="loading"></loading-view>

	</view>
</template>

<script>
	import {
		apiServiceWorkOrderInfo,
		apiServiceWorkOrderOrderList
	} from "@/api/service_work_order"
	import {
		navList
	} from "./nav"
	export default {
		data() {
			return {
				current: 0,
				navList: this.$zhTran(navList),
				orderList: [],
				accendant_Info: {},
				loading: true,
				statusDesc: ['new', 'work', 'check', 'done', 'cancel']
			}
		},
		methods: {
			getServiceWorkOrderInfo() {
				apiServiceWorkOrderInfo().then(res => {
					this.accendant_Info = this.$zhTran(res);
					if (Object.keys(res).length > 0) {
						this.loading = false
					} else {
						this.$Router.replace('/pages/user/user')
					}
				})
			},
			getOrderList() {
				apiServiceWorkOrderOrderList({
					accendant_user: this.userInfo.id,
					order_type: 'other_work',
					page_no: 1,
					page_size: 3,
				}).then(({
					lists,
					extend
				}) => {
					this.orderList = this.$zhTran(lists)
				})
			},
			toPath(url, equery) {
				var nquery = equery || {}
				this.$Router.push({
					path: '/bundle3/pages/service_work_order/accendant/' + url,
					query: nquery
				})
			},
			toTabbar(idx) {
				this.$Router.replaceAll({
					path: this.navList[idx].path,
					query: {}
				})
			},
			callPhone(e, phone) {
				e.preventDefault(); // 阻止事件冒泡穿透
				wx.makePhoneCall({
					phoneNumber: phone
				})
			}
		},
		computed: {
			bgStyle() {
				return {
					'background-image': `url(${this.$getImageUri('resource/image/shopapi/service_work_order/bg.png')})`,
				}
			}
		},
		onShow() {
			this.getOrderList()
		},
		onLoad() {
			this.getServiceWorkOrderInfo()
		},
	}
</script>

<style lang="scss" scoped>
	.user-info {
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;

			// #endif
			.logo {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				background-color: #fff;

				image {
					width: 60rpx;
				}
			}
		}
	}

	.body {
		position: relative;
	}

	.top-tab {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}


	.item-tab {
		margin-bottom: 20rpx;

		.title {
			color: rgba(47, 47, 47, 1);
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.data-tab {
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;

			.number {
				color: rgba(58, 58, 58, 1);
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.desc {
				color: rgba(128, 128, 128, 1);
				font-size: 26rpx;
			}
		}
	}

	.order-info {

		.order-box {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;

			.box-main {
				width: 100%;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(22, 22, 22, 1);
				}

				.badge {
					padding: 10rpx 20rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
					font-size: 24rpx;

					&.new {
						background-color: rgba(64, 115, 250, 1);
						color: #fff;
					}

					&.work {
						background-color: rgba(255, 141, 26, 1);
						color: #fff;
					}

					&.check {
						background-color: rgba(245, 114, 108, 1);
						color: #fff;
					}

					&.done {
						background-color: rgba(103, 194, 69, 1);
						color: #fff;
					}

					&.cancel {
						background-color: rgba(153, 153, 153, 1);
						color: #fff;
					}
				}

				.desc {
					color: rgba(128, 128, 128, 1);
					font-size: 24rpx;
				}
			}


		}
	}
</style>